<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="用户名:">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="姓名:">
                <span>{{ props.row.nickname }}</span>
              </el-form-item>
              <div v-for="item in props.row.grades" :key="item.index" class="subjectAll">
                <el-form-item label="学科:">
                  <span>{{ item.subject }}</span>
                </el-form-item>
                <el-form-item label="成绩:" class="el-form-item-two" style="width:40%">
                  <span>{{ item.grade }}</span>
                </el-form-item>
                <el-button size="mini" type="danger" @click="handleDelete(item.id)"
                  >删除</el-button
                >
              </div>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="name"> </el-table-column>
        <el-table-column label="姓名" prop="nickname"> </el-table-column>
        <!-- <el-table-column label="电话" prop="phone"> </el-table-column> -->
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >添加成绩</el-button
            >
            <el-button size="mini" type="danger" @click="setRemark(scope.row)"
              >添加评语</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="添加成绩" v-model="dialogFormVisible">
        <el-form :model="selectTable">
          <el-form-item label="姓名：" label-width="100px">
            {{ selectTable.name }}
          </el-form-item>
          <el-form-item label="科目名称：" label-width="100px">
            <el-input v-model="selectTable.subject"></el-input>
          </el-form-item>
          <el-form-item label="成绩：" label-width="100px">
            <el-input v-model="selectTable.grade"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateShop">确 定</el-button>
        </div>
      </el-dialog>

       <el-dialog title="添加评语" v-model="dialogFormVisibleTwo">
        <el-form :model="selectTable">
          <el-form-item label="用户名:" label-width="100px">
            {{ selectTable.name }}
          </el-form-item>
           <el-form-item label="姓名:" label-width="100px">
            {{ selectTable.nickname }}
          </el-form-item>
          <el-form-item label="评语" label-width="100px">
            <el-input v-model="selectTable.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleTwo = false">取 消</el-button>
          <el-button type="primary" @click="updateRemark">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import headTop from "../components/headTop";
import { baseUrl, baseImgPath } from "@/config/env";
import { getAllUser, getGrade, addGrade,setRemark, delGrade } from "@/api/getData";
export default {
  data() {
    return {
      baseUrl,
      baseImgPath,
      city: {},
      offset: 0,
      limit: 20,
      count: 0,
      tableData: [],
      currentPage: 1,
      selectTable: {},
      dialogFormVisible: false,
      dialogFormVisibleTwo:false,
      categoryOptions: [],
      selectedCategory: [],
      address: {},
    };
  },
  created() {
    this.getResturants();
  },
  components: {
    headTop,
  },
  methods: {
    setRemark(row) {
      // console.log(id);
      this.selectTable = row;
      this.dialogFormVisibleTwo=true
    },
    async getResturants() {
      let res = await getAllUser();
      let gradeAll = await getGrade();
      let grades = [];
      if (res.data.code == 200) {
        this.tableData = [];
        res.data.data.map((item) => {
          item.grade = [];
          gradeAll.data.data.map((citem) => {
            if (item.username == citem.username) {
              grades = {
                subject: citem.subject,
                grade: citem.grade,
                id: citem.id,
              };
              item.grade.push(grades);
            }
          });
        });
        let Data = res.data.data;
        Data.map((item) => {
          let tableData = {};
          tableData.name = item.username;
          tableData.nickname = item.nickname;
          tableData.grades = item.grade;
          this.tableData.push(tableData);
        });
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },

    async handleEdit(index, row) {
      this.selectTable = row;
      this.dialogFormVisible = true;
    },
    async handleDelete(id) {
      let params = new URLSearchParams();
      params.append("id", id);
      const res = await delGrade(params);
      let { code, msg } = res.data;
      if (code == 200) {
        this.$message({
          type: "success",
          message: msg,
        });
        this.getResturants();
      } else {
        this.$message({
          type: "error",
          message: msg,
        });
      }
    },
    async updateShop() {
      this.dialogFormVisible = false;
      if(!this.selectTable.subject||!this.selectTable.grade){
        //  this.$message({
        //     type: "error",
        //     message: '请填写科目或成绩！',
        //   });
        this.$message.error('请填写科目或成绩！');
        return false
      }
      try {
        let params = new URLSearchParams();
        params.append("username", this.selectTable.name);
        params.append("subject", this.selectTable.subject);
        params.append("grade", this.selectTable.grade);
        params.append("nickname", this.selectTable.nickname);
        const res = await addGrade(params);
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "成绩设置成功",
          });
          this.getResturants();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      } catch (err) {
        console.log("更新成绩失败", err);
      }
    },
    async updateRemark(){
       this.dialogFormVisibleTwo = false;
        if(!this.selectTable.remark){
         this.$message({
            type: "error",
            message: '请填写评语！',
          });
        return false
      }
      try {
        let params = new URLSearchParams();
        params.append("username", this.selectTable.name);
        params.append("remark", this.selectTable.remark);
        console.log(params);
        const res = await setRemark(params);
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "评语设置成功",
          });
          this.getResturants();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      } catch (err) {
        console.log("设置评语失败", err);
      }
    }
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table_container {
  padding: 20px;
}
.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.subjectAll {
  line-height: 36px;
  .el-form-item-two {
    width: 40%;
  }
}
</style>
